<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>002hover效果</title>
		<style>
			html,body{
				height: 100%;
				width: 100%;
				font-family: 'Raleway', sans-serif;
			}
			*{
				padding: 0;
				margin: 0;
			}
			.item{
				width: 100%;
				height: 120px;
				text-align: center;
			}
			.item:nth-child(odd){
				background-color: #0e83cd;
			}
			.item:nth-child(even){
				background-color: #435a6b;
			}
			.title{
				font-size: 25px;
				position: absolute;
				line-height: 100px;
				left: 50px;
			}
			*[id^="a"]{
				color: white;
				font-size: 1.5em;
				cursor: pointer;
				width: 150px;
				height: 40px;
				line-height: 40px;
				margin-top: 30px;
				position: absolute;
				display: inline-block;
			}
			/*
			 * 效果1
			 */
			#a1::before{
				content: "[";
				margin-right: 0;
				opacity: 0;
				transition: margin-right 0.3s, opacity 0.2s;
			}
			#a1::after{
				content: "]";
				margin-left: 0;
				opacity: 0;
				transition: margin-left 0.3s, opacity 0.2s;
			}
			#a1:hover::before{
				opacity: 1;
				margin-right: 20px;
			}
			#a1:hover::after{
				opacity: 1;
				margin-left: 20px;
			}
			/*
			 * 效果2
			 */
			#a2{
				position: absolute;
			}
			#a2::after{
				margin-top: -10px;
				opacity: 0;
				position: absolute;
				top: 100%;
				left: 0;
				content: "";
				width: 100%;
				height: 5px;
				background-color: #0E83CD;
				transition: margin-top 0.3s, opacity 0.2s;
			}
			#a2:hover::after{
				margin-top: 0;
				opacity: 1;
			}
			/*
			 * 效果3
			 */
			.item:last-child{
				/**
				 * 注意设置css3d的：perspective、transform-style
				 */
				perspective: 1000px;
				-webkit-perspective: 1000px;
			}
			.item #container{
				position: absolute;
				left: 50%;
				transform-style: preserve-3d;
				-webkit-transform-style: preserve-3d;
				transform: rotateX(0deg) translate3d(0,0,0);
				-webkit-transform: rotateX(0deg) translate3d(0,0,0);
				/*origin是以元素自身大小为基础，要注意父元素与子元素的空间位置关系*/
				/*此处和hover都需要设置origin，因为失去hover后，也是一个3d变换*/
				transform-origin: 0 50px 0;
				-webkit-transform-origin: 0 50px 0;
				transition: transform 0.3s;
				-webkit-transition: -webkit-transform 0.3s;
			}
			#a3{
				position: absolute;
				transform-style: preserve-3d;
				-webkit-transform-style: preserve-3d;
				background-color: #435a6b;
				transform: translate3d(0,0,20px);
				-webkit-transform: translate3d(0,0,20px);
			}
			#a3::after{
				content: "Link";
				position: absolute;
				top: 100%;
				left: 0;
				background-color: gray;
				width: 100%;
				height: 100%;
				transform: rotateX(-90deg);
				-webkit-transform: rotateX(-90deg);
				transform-origin: top;
				-webkit-transform-origin: top;
			}
			#container:hover{
				transform: rotateX(90deg) translate3d(0,0,0);
				-webkit-transform: rotateX(90deg) translate3d(0,0,0);
				/*origin是以元素自身大小为基础，要注意父元素与子元素的空间位置关系*/
				transform-origin: 0 50px 0;
				-webkit-transform-origin: 0 50px 0;
			}
			/**
			 * 效果4
			 */
			#a4{
				overflow: hidden;
			}
			#a4>span{
				display: block;/*inline不能设置margin*/
				margin-top:0px;
				opacity: 1;
				transition: margin-top 0.3s;
			}
			#a4:hover>span{
				margin-top: -40px;
			}
			#a4>span::after{
				position: absolute;
				top: 100%;
				width: 100%;
				left: 0;
				margin-top: -10px;
				content: "Link";
				font-weight: bolder;
				transition: margin-top 0.3s, opacity 0.2s;
			}
			#a4:hover>span::after{
				margin-top: -40px;
			}
			
			@keyframes a5_hover{
				from{
					left: -100%;
				}
				to{
					left: 0;
				}
			}

			#a5{
				overflow: hidden;
			}
			#a5::after{
				content: "";
				position: absolute;
				display: block;
				height: 4px;
				background-color: black;
				bottom: 0;
				width: 100%;
				left: 100%;
				transition: all 0.2s ease-in-out;
			}
			#a5:hover::after{
				left: 0;
				animation: a5_hover 0.2s ease-in-out;
			}
		</style>
	</head>
	<body>
		<div class="item">
			<div class="title"><span>1</span></div>
			<a id="a1">Link</a>
		</div>
		<div class="item">
			<div class="title"><span>2</span></div>
			<a id="a2">Link</a>
		</div>
		<div class="item">
			<div class="title"><span>3</span></div>
			<div>
				<div id="container"><a id="a3">Link</a></div>
			</div>
		</div>
		<div class="item">
			<div class="title"><span>4</span></div>
			<a id="a4"><span>Link</span></a>
		</div>
		<div class="item">
			<div class="title"><span>5</span></div>
			<a id="a5"><span>Link</span></a>
		</div>
	</body>
</html>
